<template>

    <h2>显示房型</h2>
    房型名称:<input type="text" v-model="RoomTypeName">
    <input type="button" @click="Lodata" value="查询">
    <table border="1">
        <thead>
            <tr>
                <td>房型编号</td>
                <td>房型名称</td>
                <td>售价</td>
                <td>可住人数</td>
                <td>房型图片</td>
                <td>房型介绍</td>
                <td>操作列</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.RoomTypeId}}</td>
                <td>{{item.RoomTypeName}}</td>
                <td>{{item.RoomMoney}}</td>
                <td>{{item.RoomNum}}</td>
                <td><img style="width: 60px;height: 60px;" :src="item.RoomTypeImg"></td>
                <td>{{item.RoomTypeInfo}}</td>
                <td>操作列
                    <a style="margin-right: 20px;" @click="Del(item.RoomTypeId)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    当前共{{pageInfo.totalCount}}条， 当前页共{{pageInfo.pageSize  }}条，
    当前页共{{  pageInfo.pageIndex}}/{{ pageInfo.pageCount }}页
    <span>
        <a  href="#" style="margin-right: 20px;" @click="pageChange('F')">首页</a>
        <a  href="#" style="margin-right: 20px;" @click="pageChange('U')">上一页</a>
        <a  href="#" style="margin-right: 20px;" @click="pageChange('N')">下一页</a>
        <a  href="#" style="margin-right: 20px;" @click="pageChange('E')">尾页</a>
    </span>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted ,ref} from "vue";



const Del=(Tid:number)=>{
if(confirm("你确定要删除吗？"))
{
    axios.get('https://localhost:7141/api/RoomType/DelRoomType',
    {
        params:{
            RoomTypeId:Tid
        }
    }


    )
    .then(res=>{
        if(res.data>0){
            alert("删除成功");
            Lodata();
        }
        else{
            alert("删除失败");
        }
    })

}



}


const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    pageCount:0,
    totalCount:0
})


const RoomTypeName=ref("");


const info=ref([{
    RoomTypeId:0,
    RoomTypeName:"",
    RoomMoney:"",
    RoomNum:"",
    RoomTypeImg:"",
    RoomTypeInfo:""

}])

//数据加载
onMounted(()=>{
    Lodata()
})

const Lodata=()=>{
    axios.get('https://localhost:7141/api/RoomType/ShowRoomType',
    {
        params:{
            RoomTypeName:RoomTypeName.value,
            pageIndex:pageInfo.value.pageIndex,
            pageSize:pageInfo.value.pageSize


        }
    }
    
    )
    .then(res=>{
        pageInfo.value.pageCount=res.data.PageCount;
        pageInfo.value.totalCount=res.data.TotalCount
        info.value=res.data.Data_Info;
        

    })
}

///分页

const pageChange=(choose:string)=>{

    switch(choose){
        case 'F':
            pageInfo.value.pageIndex=1;
            break;
            case 'U':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
            break;
            case 'N':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
            break;
            case 'E':
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;
    }

Lodata();
    
}

</script>